<template>
  <div class="table-body">
    <div class="table-body-box">
      <el-table
          ref="multipleTable"
          :data="arryList"
          :stripe="tableoption.tableStripe"
          :border="tableoption.tableBorder"
          tooltip-effect="dark"
          style="width: 100%"
          header-cell-class-name="table-text-c"
          cell-class-name="table-text-c">
        <el-table-column
            label="学生头像"
            width="100"
            :key="1">
          <template slot-scope="scope">
            <!--            <viewerModle type="1" :imgSrc="scope.row.student.pic"></viewerModle>-->
            <ImagePreview :src="scope.row.student?scope.row.student.pic:''" width="40px" height="40px"></ImagePreview>
          </template>
        </el-table-column>
        <el-table-column
            label="学生姓名"
            :key="2">
          <template slot-scope="scope">
            {{
              scope.row.student ? scope.row.student.name : '--'
            }}【{{ scope.row.student && scope.row.student.classes ? scope.row.student.classes.class_name : '--' }}】
          </template>
        </el-table-column>
        <!--        <el-table-column-->
        <!--            label="班级"-->
        <!--            :key="3">-->
        <!--          <template slot-scope="scope">-->
        <!--            {{ scope.row.student && scope.row.student.classes ? scope.row.student.classes.class_name : '&#45;&#45;' }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column-->
        <!--            label="现场图片"-->
        <!--            width="100"-->
        <!--            :key="4">-->
        <!--          <template slot-scope="scope">-->
        <!--            <viewerModle type="1"-->
        <!--                         :imgSrc="scope.row.corner&&scope.row.corner.pic?scope.row.corner.pic:''"></viewerModle>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column
            label="区角名称"
            :key="5">
          <template slot-scope="scope">
            {{ scope.row.corner ? scope.row.corner.name : '未找到/已删除' }}
          </template>
        </el-table-column>
        <el-table-column
            label="点评人"
            :key="6">
          <template slot-scope="scope">
            {{ scope.row.users ? scope.row.users.realname : '--' }}
          </template>
        </el-table-column>
        <el-table-column
            prop="create_time"
            label="点评时间"
            :key="9">
        </el-table-column>
        <el-table-column
            prop="create_time"
            label="被评频次"
            :key="11"
            width="220">
          <template slot-scope="scope">
            <!--            apply_number 预约-->
            <!--            sign_number 签到-->
            <!--            comment_number 评论-->
            <!--            score_number 评分-->
            <div class="point-list">
              <p>总预约次数：<i>{{ scope.row.apply_number || 0 }}</i></p>
              <p>总签到次数：<i>{{ scope.row.sign_number || 0 }}</i></p>
              <p>总采集次数：<i>{{ scope.row.comment_number || 0 }}</i></p>
              <p>总评价次数：<i>{{ scope.row.score_number || 0 }}</i></p>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            label="点评内容"
            :key="10"
            width="220"
            fixed="right">
          <template slot-scope="scope">
            <div style="display: flex;align-items: center;justify-content: center;">
              <el-popover
                  placement="left-start"
                  :title="`${scope.row.student ? scope.row.student.name : '--'}-${scope.row.corner ? scope.row.corner.name : '未找到/已删除'}-点评内容`"
                  width="300"
                  trigger="click"
                  @show="showPointFn(scope.row,scope.$index)">
                <div class="tableline">
                  <div class="list" v-for="(item,index) in JSON.parse(scope.row.list)">
                    <p class="list-a">{{ index + 1 }}.</p>
                    <p class="list-b">{{ item.name }}</p>
                    <p class="list-c">
                      <el-tooltip :content="item.desc" placement="top">
                        <em>{{ item.evaluate }}</em>
                      </el-tooltip>
                    </p>
                  </div>
                </div>
                <span slot="reference" class="tablelineBtn">本次点评详情</span>
              </el-popover>
              <el-button type="primary" plain size="mini" class="ml-10"
                         @click="getCornerPoint(scope.row.student ? scope.row.student : '')">全区角水平
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <cornerStudentPoint :visible.sync="cornerPointVisible" :studentName="studentName"
                        :studentId="studentId"></cornerStudentPoint>
  </div>
</template>

<script>
import cornerStudentPoint from "../components/cornerStudentPoint";

export default {
  components: {
    cornerStudentPoint
  },
  name: "studentCollection",
  props: ['arryList', 'tableoption'],
  data() {
    return {
      cornerPointVisible: false,
      studentName: '',
      studentId: ''
    }
  },
  methods: {
    showVideoSrc(video) {
      this.$emit('showvideo', video)
    },
    getCornerPoint(option) {
      if (option) {
        this.studentName = option.name
        this.studentId = option.id
        this.cornerPointVisible = true
      }
    },
    showPointFn(row, index) {
      if (!this.arryList[index].showDetail) {
        this.$emit('getCornerFn', {row: row, index: index})
      }
    }
  }
}
</script>

<style scoped>
.list {
  display: flex;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px solid #f4f4f4;
}

.list:last-child {
  border-bottom: none;
}

.list:hover {
  background: #f4f4f4;
  text-decoration: underline;
}

.list-b {
  flex: 1;
}

.list-c {
  color: #e55f00;
}

.list-c em {
  font-style: normal;
}

.point-list {
  overflow: hidden;
}

.point-list p {
  width: 50%;
  float: left;
  font-size: 13px;
  cursor: pointer;
}

.point-list p:hover {
  text-decoration: underline;
}

.point-list p i {
  font-style: normal;
  font-weight: bold;
  color: #006dcd;
  font-size: 16px;
}
</style>
